<template>
  <el-dialog
    title="案件分发"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog" 
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form ref="form" class="query-more-form" size="mini" label-width="85px" :model="form">
        <el-row :gutter="20">
          <el-col :span="6"><el-form-item label="任务名称"><el-input v-model="form.reportTel" placeholder="请输入任务名称" maxlength="255" /></el-form-item></el-col>
          <el-col :span="6">
            <el-form-item label="任务类型">
              <el-select v-model="form.reportTel" placeholder="请选择任务类型"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="抽查数量"><el-input v-model="form.reportTel" placeholder="请输入任务名称" maxlength="255" /></el-form-item>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button size="mini" class="submit-btn">生成对象</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="检查类别">
              <el-select v-model="form.reportTel" placeholder="请选择检查类别"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检查主题">
              <el-select v-model="form.reportTel" placeholder="请选择检查主题"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查时间">
              <el-date-picker
                style="width: 100%;"
                v-model="form.reportTel"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务要求">
              <el-input v-model="form.reportTel" placeholder="请输入任务要求" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="table-title flex-start-center mb-10">
            <img :src="icon1" class="w-20 h-20 mr-5" alt="">
            <span class="mr-5">检查对象</span>
            <span class="flex-1 fs-12 color-999 of-hidden" style="white-space: nowrap;">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></span>
          </div>
          <div class="table-content">
            <el-form class="query-more-form" size="mini" label-width="60px">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="类别">
                    <el-select v-model="form.reportTel" placeholder="请输入检查类别"></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="flex-between-center">
                    <div class="operation-btn bluebg">查询</div>
                    <div class="operation-btn yellow">添加</div>
                    <div class="operation-btn red">删除</div>
                  </div>
                </el-col>
              </el-row>
            </el-form>
            <div class="">
              <div class="table-list-panel">
                <el-table
                  v-loading="tableLoading"
                  border
                  size="small"
                  :data="tableData"
                  height="300px"
                  style="width: 100%"
                >
                  <el-table-column type="index" label="序号" width="45" />
                  <el-table-column prop="key3" label="检查对象" show-overflow-tooltip />
                </el-table>
              </div>
              <div class="pagination-panel">
                <Pagination
                  :total="query.total"
                  :page.sync="query.page"
                  :limit.sync="query.size"
                  layout="total, sizes, prev, pager, next"
                  @pagination="initData"
                />
              </div>
            </div>
          </div>
        </el-col>
        <!-- table2 绑定对象需替换-->
        <el-col :span="12">
          <div class="table-title flex-start-center mb-10">
            <img :src="icon2" class="w-20 h-20 mr-5" alt="">
            <span class="mr-5">检查事项</span>
            <span class="flex-1 fs-12 color-999 of-hidden" style="white-space: nowrap;">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></span>
          </div>
          <div class="table-content">
            <el-form class="query-more-form" size="mini" label-width="60px">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="类别">
                    <el-select v-model="form.reportTel" placeholder="请输入检查类别"></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="flex-between-center">
                    <div class="operation-btn bluebg">查询</div>
                    <div class="operation-btn yellow">添加</div>
                    <div class="operation-btn red">删除</div>
                  </div>
                </el-col>
              </el-row>
            </el-form>
            <div class="">
              <div class="table-list-panel">
                <el-table
                  v-loading="tableLoading"
                  border
                  size="small"
                  :data="tableData"
                  height="300px"
                  style="width: 100%"
                >
                  <el-table-column type="index" label="序号" width="45" />
                  <el-table-column prop="key3" label="检查类型" show-overflow-tooltip />
                  <el-table-column prop="key3" label="检查事项" show-overflow-tooltip />
                </el-table>
              </div>
              <div class="pagination-panel">
                <Pagination
                  :total="query.total"
                  :page.sync="query.page"
                  :limit.sync="query.size"
                  layout="total, sizes, prev, pager, next"
                  @pagination="initData"
                />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination'
import icon1 from '@/assets/images/icon/icon1.png'
import icon2 from '@/assets/images/icon/icon2.png'
  export default {
    components: {
      Pagination
    },
    name: '',
    props:{
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        icon1,icon2,
        query:{
          total: 1,
          page: 1,
          size: 10
        },
        deptTreeLoading: false,
        deptTree: [],
        deptProps: {
          children: "children",
          label: "label",
        },
        expandedKeysDept:[],
        filterText: '',
        form: {},
        tableLoading: false,
        tableData: []
      }
    },
  
    methods: {
      
      handleClose(){
        this.$emit('closeDialog')
      }
    }
  }
</script>

<style lang="scss" scoped>
.table-title{
  color: #1189EF;
  font-weight: bold;
}
</style>